<template>
    <div class="producelistdialog" style="overflow:scroll;">
        <div class="pld-top">
            <div class="pld-top-desc">
                <div class="pld-top-top">You have applied for 1 loan products</div>
                <div class="pld-top-bottom">The details of your loan products are as follows :</div>
            </div>
            <div class="pld-close" @click="$emit('doClose')">
                <img src="../assets/close.png" alt="">
            </div>
        </div>
        <div style="height:(200/@a);">
            <div class="pld-content" v-for="item in sxflist" :key="item.id" :item="item">
                <div class="pl-content-desc">Product NO:</div>
                <ul class="pl-content-left">
                    <li>Loan products:</li>
                    <li>Term (Days):</li>
                    <li>Loan amount:</li>
                    <li>Daily interest rate:</li>
                    <li v-if="item.feeDescList">{{ item.feeDescList[0].title }}:</li>
                    <li>Total interest and service fee:</li>
                    <li>Amount Received:</li>
                </ul>
                <div class="pl-content-right">
                    <li>{{ item.name }}</li>
                    <li>{{ item.term }} DAY</li>
                    <li>₹ {{ item.amount }}</li>
                    <li>{{ item.overdueRate }}</li>
                    <li v-if="item.feeDescList">{{ item.feeDescList[0].value }}</li>
                    <li>₹ {{ item.interestAmount }}</li>
                    <li>₹ {{ item.amount - item.interestAmount }}</li>
                </div>
            </div>
        </div>
        <van-button class="pld-confirm" @click="doConfirm">
            Confirm
        </van-button>
    </div>
</template>
<script>
import { daikuanSend } from "../api";
import { jiami, jiemi } from '../utils/aeskey.js'
import { Toast } from "vant";
export default {
    props: ['sxflist', 'activeList'],
    data() {
        return {

        }
    },
    methods: {
        async doConfirm() {
            const f = {
                model: {
                    productIds: [],
                    code: ''
                }
            }
            f.model.productIds = this.activeList
            // this.$router.push('/pettycash')
            // console.log('f', f)
            const res = await daikuanSend(jiami(f))
            console.log('申请贷款的结果', jiemi(res.data))
            //添加成功
            this.$emit('doClose')
            Toast('Successful Loan')
            this.$router.push('/myorder')
        }
    },
    computed: {
        list() {
            return this.$store.state.produceList.produceList[0]
        }
    }
}
</script>

<style scoped lang="less">
@a: 3.75vw;

.producelistdialog {
    position: relative;
    box-sizing: border-box;
    width: (350/@a);
    height: (350/@a);
    padding-bottom: (40/@a);
    padding-top: (70/@a);

    .pld-top {
        position: fixed;
        top: 0;
        left: 0;
        width: (320/@a);
        height: (70/@a);
        background-color: #9f3dff;
        padding-left: (15/@a);
        padding-top: (20/@a);
        box-sizing: border-box;

        .pld-top-top {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (15/@a);
            color: #FFFFFF;
        }

        .pld-top-bottom {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            color: #DCDCDC;
            margin-top: (5/@a);
        }

        .pld-close {
            width: (40/@a);
            height: (40/@a);
            position: absolute;
            top: (13/@a);
            right: (25/@a);

            img {
                width: 100%;
            }
        }
    }

    .pld-content {
        width: (320/@a);
        height: (237/@a);
        background-color: #fff;
        padding-left: (15/@a);
        padding-right: (15/@a);
        padding-top: (14/@a);
        box-sizing: border-box;

        .pl-content-desc {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            color: #101010;
        }

        li {
            list-style: none;
            margin-top: (15/@a);
        }

        .pl-content-left {
            float: left;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            color: #808080;
        }

        .pl-content-right {
            float: right;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            color: #202020;
            margin-right: (18/@a);
        }
    }

    .pld-confirm {
        position: fixed;
        bottom: 0;
        left: 0;
        width: (320/@a);
        height: (43/@a);
        background: #9F3DFF;
        border-radius: 0 0 (15/@a) (15/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (18/@a);
        color: #FFFFFF;
    }
}
</style>